<template>
	<view>
		
		<view v-for="(item, index) in balanceList" :key="index"
		class="item_wrap row" @click="goToDetail(index)">
			<image :src="item.statusIcon" mode="aspectFill"></image>
			<view class="col_between flex_one">
				<span class="title">{{item.statusStr}}</span>
				<span class="name">{{item.createDateStr}}</span>
			</view>
			
			<view class="col_between">
				<span class="title" style="text-align: right;">{{item.realAmountStr}}</span>
				<span class="name">余额 {{item.balanceAmountStr}}</span>
			</view>
			
		</view>
		
		<view class="uni-tab-bar-loading" v-if="balanceList && balanceList.length>0">
			<uni-load-more :loadingType="loadingType" :contentText="loadingText"  ></uni-load-more>
		</view>
		
		<view class="empty_wrap col" v-if="balanceList.length == 0">
			<image src="../../static/img/balance_empty.png" mode="aspectFill"></image>
			<span>您还没有收支明细哦~</span>
			<span class="action_now_btn" @click="goToBalance">去投资</span>
		</view>
	</view>
</template>

<script>
	import { BASE_URL,transList } from '@/utils/api'
	 import uniLoadMore from '@/components/uni-load-more.vue';
	
	export default {
		components: {uniLoadMore},
		data() {
			return {
				balanceList: [],
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				loadingType: 1,
				page: 1
			}
		},
		methods: {
			async transList(){
				let res = await transList(this.page);
				if(res.code == 1){
					if(this.page == 1){
						this.balanceList = res.data.list;
					}else{
						this.balanceList = this.balanceList.concat(res.data.list);
					}
					
					if(res.data.list.length < 20){
						this.loadingType = 2;
					}else{
						this.loadingType = 0;
					}
					this.$forceUpdate();
					
				}
			},
			goToBalance(){
				uni.navigateTo({
					url:'/pages/home_webview/home_webview?url='+'http://www.91fld.com/fanli'
				})
			},
			goToDetail(index){
				uni.navigateTo({
					url: '/pages/balance_detail/balance_detail?id='+this.balanceList[index].id
				})
			}
		},
		onLoad() {
			this.transList();
		},
		onReachBottom() {
			this.loadingType = 1;
			this.page++;
			this.transList();
		},
	}
</script>

<style>
page{background: #F1F1F1;}
.empty_wrap{font-size: 24upx; color: #999999; margin-top: 253upx;}
.empty_wrap image{width: 200upx; height: 220upx; margin-bottom: 18upx;}
.action_now_btn{background: #FFCA0A; border-radius: 12upx; font-size: 32upx; color: #333333; width: 280upx; text-align: center;height: 74upx;line-height: 74upx; margin-top: 59upx; font-weight: bold;}

.item_wrap{height: 120upx; border-bottom: 20upx solid #F1F1F1; padding: 0upx 26upx;background: #FFFFFF;}
.item_wrap image{width: 44upx; height: 44upx; margin-right: 35upx;}
.item_wrap .title{font-size: 32upx; color: #333333; margin-bottom: 19upx; line-height: 1.0;}
.item_wrap .name{font-size: 24upx; color: #999999; line-height: 1.0;}

.uni-tab-bar-loading{padding: 0upx 0upx 20upx;}
</style>
